<template>
  <div>
    <div style="width: 430px; float: right">
      <el-input v-model="name" placeholder="请输入图书名称" @keyup.enter.native="searchEnterFun($event)">
        <i class="el-input__icon el-icon-search" slot="prefix"></i>
        <el-button slot="append" :icon="appendIcon" v-on:click="switchAppend"></el-button>
      </el-input>
    </div>
    <div v-if="showAdvance" id="advance" style="padding: 10px;float: right">
      <div class="block" style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">图书分类</div>
        <el-cascader v-model="category"
                     :options="bookSubTagList"
                     filterable
                     :props="{label: 'name', value: 'id', checkStrictly: true }"
                     clearable size="small" style="width: 300px;"></el-cascader>
      </div>
      <div class="block" style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">ISBN号</div>
        <div style="display: inline-block">
          <el-input v-model="ISBN" size="small" style="width: 300px;"></el-input>
        </div>
      </div>
      <div class="block" style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">版本号</div>
        <div style="display: inline-block">
          <el-input v-model="version" size="small" style="width: 300px;"></el-input>
        </div>
      </div>
      <div class="block" style="margin-top: 10px">
        <div style="width: 100px;display: inline-block;text-align: right">发布时间</div>
        <div class="block" style="display: inline-block;">
          <el-date-picker
            v-model="updateTime"
            type="datetimerange"
            @change="dateChange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format=" yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd HH:mm:ss"
            size="small" style="width: 300px;">
          </el-date-picker>
        </div>
      </div>
      <div style="margin-top: 60px; right: 10px;">
        <el-row>
          <el-col :offset="6" :span="6">
            <div style="margin-left: 90px;height: 32px; width: 88px;">
              <el-button size="small" v-on:click="advanceCancel">取 消</el-button>
            </div>
          </el-col>
          <el-col :offset="2" :span="2">
            <div style="margin-left: 30px;height: 32px; width: 88px;">
              <el-button size="small" v-on:click="reset">重置</el-button>
            </div>
          </el-col>
          <el-col :offset="2" :span="2">
            <div div style="margin-left: 30px;height: 32px; width: 88px;">
              <el-button size="small" type="success" v-on:click="advanceConfirm">确 定</el-button>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import Label from "../calculator/exportModel/Label";

export default {
  name: "OfficialSearch",
  components: {Label},
  props: ['bookSubTagList'],
  data() {
    return {
      currentPage: 1, // 第几页
      pageSize: 10, // 每页显示的数据个数
      totalNum: 0,
      showAdvance: false,
      appendIcon: "el-icon-caret-bottom",
      name: '',
      category: [],
      OfficialSearchData: [],
      updateTime: '',
      ISBN: '',
      version: ''
    }
      },
      methods:{
        switchAppend: function () {
          if (this.showAdvance) {
            this.showAdvance = false;
            this.appendIcon = "el-icon-caret-bottom";
          } else {
            this.showAdvance = true;
            this.appendIcon = "el-icon-caret-top";
          }
        },
        searchTerminology: function () {
          console.log("search terminology");
        },
        advanceCancel: function () {
          this.showAdvance = false;
        },
        reset: function () {
          this.name = ''
          this.category = []
          this.updateTime=''
          this.ISBN = ''
        },
        dateChange(val) {
          this.updateTime = val;
          if (val == null) {
            this.updateTime = ''
          }
        },
        searchEnterFun (e){
          const keyCode = window.event ? e.keyCode : e.which;
          if (keyCode === 13) {
            this.advanceConfirm()
          }
        },
        advanceConfirm: function () {
          this.axios.get('/pmph/action/book/selectOfficialList',{
            params: {
              currentPage: 1, // 第几页
              pageNum: 10, // 每页显示的数据个数
              name: this.name,
              category: JSON.stringify(this.category),
              updateTime: this.updateTime.toString(),
              ISBN: this.ISBN
            }
          }).then((response) => {
            this.noData = response.data.totalNum <= 0;
            this.OfficialSearchData = response.data.records
            this.totalNum = response.data.total;
            this.$emit('advanceConfirm', this.OfficialSearchData, this.totalNum, this.name, this.category, this.updateTime, this.ISBN)
            this.showAdvance = false;
          }).catch((error) => {
            console.error(error);
            this.tableData = [];
            this.noData = true;
            this.message.error("未能请求到数据");
          })

    },
  }
}
</script>

<style scoped>

</style>
